<template>
	<div id="header">
		<!-- 头像 -->
		<van-uploader :after-read="afterRead">
			<div class="avatar">
				<img v-show="!userState" src="/img/defaultAvatar.png" >
				<img v-show="userState" :src="data.avatar" >
			</div>
		</van-uploader>
		<!-- 已登录 -->
		<div v-show="userState && data.user_name">欢迎回来，{{data.user_name}}</div>
		<div v-show="userState && !data.user_name">欢迎回来，{{data.sname}}</div>
		<!-- 未登录 -->
		<div v-show="!userState">
			<router-link to="/login">登录</router-link>
			<router-link to="/register">注册</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		props:['userState','data'],
		methods:{
			// 头像上传完毕后会触发
			afterRead(e){
				let formData = new FormData()
				formData.append('avatar',e.file)
				formData.append('sid',this.data.sid)
				console.log(formData)
				const url = 'http://localhost:6004/sufubi/avatar'
				this.axios.post(url,formData).then(res => {
					this.data.avatar=res.data.path
					sessionStorage.removeItem('user')
					sessionStorage.setItem('user',JSON.stringify(this.data))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
#header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 11.31em;
	background-color: #9a4145;
	.avatar {
		width: 5.75em;
		height: 5.75em;
		background-color: #fff;
		border-radius: 50%;
		margin-bottom: 0.315em;
		box-shadow: 0px 0px 2.5em #fff;
		img {
			border-radius: 50%;
			height: 5.75em;
			max-width: 100%;
			display: block;
		}
	}
	>div {
		// 标题
		&:nth-child(2){
			padding-top: 0.615em;
			color: #fff;
		}
		&:nth-child(3){
			padding-top: 0.615em;
			color: #fff;
		}
		// 登录注册
		&:nth-child(4){
			display: flex;
			align-items: center;
			>a {
				color: #fff;
				display: block;
				padding: 0.615em 0.315em;
			}
		}
	}
}
</style>